export { Form } from "antd";
import { Form, Input } from "antd";

export type FieldType = {
  key: any;
  name: string;
  label: string;
  component?: React.ReactNode;
  required?: boolean;
  rules?: any[];
};
export type FormConfig = {
  layout: "horizontal" | "vertical" | "inline";
  labelCol: Object; //https://ant-design.antgroup.com/components/grid-cn#col
  wrapperCol: Object; // 同上
};
export interface FormPropsType {
  FormConfig: FormConfig,
  Fields: FieldType[];
  [key: string]: any;
}

const initialConfig = {

}

const NForm = (props: FormPropsType) => {
  const [form] = Form.useForm();
  const { Fields, FormConfig } = props;
  return (
    <>
      <Form name="basic" {...FormConfig} form={form} scrollToFirstError>
        {Fields.map(item => {
          return (
            <Form.Item name={item.name} label={item.label} rules={item.rules}>
              {item.component || <Input />}
            </Form.Item>
          );
        })}
      </Form>
    </>
  );
};

export default NForm;
